<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>组件的嵌套</title>
  <!-- 引入 Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <!-- 准备一个容器 -->
  <div id="root"> 
    <app></app> 
  </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; 
    // 创建 student 组件
    const student = Vue.extend({
      template:`
        <div>
          <h2>学生姓名: {{name}}</h2>
          <h2>学生年龄: {{age}}</h2>
        </div> `,
      data(){
        return {
          name: '凌宸',
          age: 21
        }
      }
    }) 
    // 创建 school 组件
    const school = Vue.extend({
      name:'school',
      template:`
        <div>
          <h2>学校名称: {{name}}</h2>
          <h2>学校地址: {{address}}</h2>
          <student></student>
        </div> `,
      data(){
        return {
          name: '南昌大学',
          address: '江西南昌'
        }
      },
      // 局部注册
      components:{
        student
      }
    }) 
    // 创建 hello 组件
    const hello = {
      template:`<h1>{{msg}}</h1>`,
      data(){return {msg:'你好啊'}}
    }
    // 创建 app 组件
    const app = {
      template:`
        <div>
          <hello></hello>
          <school></school>
        </div>`,
      components:{
        hello, 
        school
      }
    }
    // 创建 vm
    new Vue({
      el: '#root',  
      components:{ app }
    })
</script>
</html>